<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <label for="tel">电话：</label>
    <input type="text" v-model="tel" id="tel"><br />

    <label>性别：</label>
    男：
    <input type="radio" name="gender" v-model="gender" value="man">
    女：
    <input type="radio" name="gender" v-model="gender" value="woman"><br />

    <label>爱好：</label>
    抽烟<input type="checkbox" v-model="hobby" value="抽烟">
    喝酒<input type="checkbox" v-model="hobby" value="喝酒">
    烫头<input type="checkbox" v-model="hobby" value="烫头"><br />

    <label>详情：</label>
    <textarea v-model.lazy="details"></textarea>

    <label>年龄：</label>
    <input v-model.number="age">

    <label>身份证：</label>
    <input v-model.trim="idCard">
</div>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data: {
            tel: "",
            gender: "",
            hobby: [],
            details: "",
            age: "",
            idCard: ""
        }
    })
</script>
</body>
</html>
